<template>
  <div class="app-container">
    <el-row>
      <el-card>
        <el-row class="text-right m-b">
          <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" stripe="true" maxheight="100">
            <!-- label是显示的标签，prob是对应data当中的名称，每一个对象当中都应该包含prop -->
            <el-table-column label="星期" prop="week" align="center">
              <template slot-scope="{row}">
                <span>{{ row.week }}</span>
              </template>
            </el-table-column>
            <el-table-column label="时段" prop="time" align="center">
              <!-- 上午 -->
              <el-table-column label="上午" prop="morning" align="center">
                <el-table-column label="姓名" prop="name" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="name in row.morning_name" :key="name" type="success">{{ name }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
                <el-table-column label="机房" prop="room" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="room in row.morning_room" :key="room" type="info">{{ room }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- 下午 -->
              <el-table-column label="下午" prop="time" align="center">
                <el-table-column label="姓名" prop="name" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="name in row.noon_name" :key="name" type="success">{{ name }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
                <el-table-column label="机房" prop="room" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="room in row.noon_room" :key="room" type="info">{{ room }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- 晚上 -->
              <el-table-column label="晚上" prop="week" align="center">
                <el-table-column label="姓名" prop="name" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="name in row.night_name" :key="name" type="success">{{ name }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
                <el-table-column label="机房" prop="room" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="room in row.night_room" :key="room" type="info">{{ room }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>

          </el-table>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ['114', '118', '214', '215', '216', '217', '218', '314', '316', '317', '318', '415', '416', '418']
      tableData: [{
        id: '1',
        week: '周一',
        morning_room: ['114', '118', '215', '217', '314', '317', '318', '418'],
        morning_name: ['彭证熹', '廖名康'],
        noon_room: ['114', '118', '214', '215', '218', '314', '316', '318', '416', '418'],
        noon_name: ['宁开慧', '吴宇曦'],
        night_room: ['214', '314', '318'],
        night_name: ['杨紫冰']
      }, {
        id: '2',
        week: '周二',
        morning_room: ['114', '215', '217', '314', '318', '415', '416'],
        morning_name: ['韦星竹', '覃文卓'],
        noon_room: ['114', '118', '214', '215', '218', '314', '318', '418'],
        noon_name: ['严琪', '吴宇曦'],
        night_room: ['317'],
        night_name: ['赵汝发']
      }, {
        id: '3',
        week: '周三',
        morning_room: ['118', '214', '215', '216', '217', '218', '314', '316', '317', '318', '416', '416'],
        morning_name: ['丘韵琳', '覃杰霖', '廖名康'],
        noon_room: ['114', '118', '214', '217', '218', '314', '318', '415', '416'],
        noon_name: ['姚建迪', '项汉', '蓝春艳'],
        night_room: ['317', '416'],
        night_name: ['黄士智']
      }, {
        id: '4',
        week: '周四',
        morning_room: ['114', '118', '214', '215', '216', '218', '314', '317', '318', '416'],
        morning_name: ['冯子轩', '覃英梅', '杨紫冰'],
        noon_room: ['114', '118', '214', '217', '218', '318', '418'],
        noon_name: ['冯婷', '蓝春艳'],
        night_room: ['118', '214', '217', '314', '318', '415', '416', '418'],
        night_name: ['耿静']
      }, {
        id: '5',
        week: '周五',
        morning_room: ['114', '217', '314', '317', '318', '414', '416'],
        morning_name: ['卢冠霖', '郭思敏'],
        noon_room: [],
        noon_name: [],
        night_room: [],
        night_name: []
      }]
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
